<template>
  <view>
    <view class="pb-50 oys">
      <view class="p-30 bg-fff mt-20  box-shadow w-full oh br-10" v-for="(item, index) in resultList" :key="index">
        <view class="flex align-center">
          <text class="fz-40 font-bold text-ellipsis">{{ item.workOrderName || '-' }}</text>
          <view class="h-36 ml-30 tag min-w-100">
            <text class="p-tb-8 p-lr-16 fz-18 br-8" :class="item.orderType === workOrderType[0].value ? 'insp' : item.orderType === workOrderType[1].value ? 'maintenance' : 'repair'">
              {{ tagLabel(item.orderType) }}
            </text>
          </view>
        </view>
        <view class="flex fz-28 mt-20 align-center">
          <view class="color-333333 min-w-230">用时时长:</view>
          <view class="flex1 color-888888">{{ timeFormat(item.totalDuration) }}</view>
        </view>
        <view class="flex fz-28 mt-20 align-center">
          <view class="color-333333 min-w-230">工单开始时间:</view>
          <view class="flex1 color-888888">{{ item.workOrderStartTime || '-' }}</view>
        </view>
        <view class="flex fz-28 mt-20 align-center">
          <view class="color-333333 min-w-230">工单结束时间:</view>
          <view class="flex1 color-888888">{{ item.workOrderEndTime || '-' }}</view>
        </view>
      </view>
    </view>
    <EmptyIcon v-if="!loading && resultList.length === 0" />

  </view>
</template>

<script>
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import { DIC } from "@/utils/dict"
import { getDetailOrderList } from "@/api/statistics/staff"

export default {
  name: "OrderDetail",
  components: { EmptyIcon },
  props: {
    queryParams: {
      type: Object,
      default: {}
    }
  },
  created () {
    this.init()
  },
  data () {
    return {
      pageNum: 1,
      loading: true,
      hasNext: true,
      resultList: []
    }
  },
  computed:{
    workOrderType(){
      return DIC.workOrderType
    }
  },
  methods: {
    init () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum
      }
      getDetailOrderList(params).then(res => {
        this.resultList = res.rows || []
        this.hasNext = res.hasNext || false
      }).finally(() => this.loading = false)
    },
    reachBottom(){
      if (!this.loading && this.hasNext) {
        this.getNextList()
      }
    },
    getNextList () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum + 1,
      }
      getDetailOrderList(params).then(res => {
        this.pageNum++
        this.hasNext = res.hasNext
        this.resultList = [...this.resultList, ...res.rows]
      }).finally(() => this.loading = false)
    },
    tagLabel (orderType) { return DIC.workOrderType.find(el => el.value == orderType)?.label },
    timeFormat(totalDuration){
      if(!totalDuration) return '00:00:00'
      const hour = Math.floor(totalDuration / 3600)
      const min = Math.floor(totalDuration % 3600 / 60)
      const second = Math.floor(totalDuration % 3600 % 60)
      return `${hour > 9 ? hour : '0'+ hour}:${min > 9 ? min : '0'+ min}:${second > 9 ? second : '0'+ second}`
    }
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
.tag {
  transform: scale(.9);
  letter-spacing: 1px
}

.insp {
  color: #2D8CF0;
  background: #ECF5FF;
  border: 1rpx solid #409EFF;
}

.maintenance {
  background: #FDF6EC;
  border: 1rpx solid #F0B65D;
  color: #F0B65D;
}

.repair {
  color: #67C23A;
  background: #F0F9EB;
  border: 1rpx solid #67C23A;
}
</style>
